<template>
  <div class="con">
    <!-- 放置内容区 -->
    <div class="contbox6_10" v-if="type == 1">
      <p class="titlelist6_10">
        权益管理
        <span style="color: #999">&nbsp;&nbsp;/&nbsp;&nbsp;</span>权益变更记录
      </p>
      <div class="content">
        <div class="sousuojg6_10">
          <el-form ref="form" :model="form" label-width="80px">
            <el-form-item label="归属OEM" style="float: left">
              <el-input
                v-model="form.oemName"
                placeholder="请输入归属OEM"
              ></el-input>
            </el-form-item>
            <el-form-item label="归属机构" style="float: left">
              <el-input
                readonly
                @focus="selectInstitution"
                v-model="officeName"
                placeholder="请输入归属机构"
              ></el-input>
            </el-form-item>
            <el-form-item label="机构名称" style="float: left">
              <el-input
                v-model="form.officeName"
                placeholder="请输入机构名称"
              ></el-input>
            </el-form-item>
            <!-- <el-form-item label="订单号" style="float: left">
              <el-input
                v-model="form.orderCode"
                placeholder="请输入订单号"
              ></el-input>
            </el-form-item> -->
            <el-form-item label="业务品牌" style="float: left">
              <el-select
                class="appointVip"
                v-model="form.channelUid"
                placeholder="请选择业务品牌"
              >
                <el-option
                  v-for="(val, index) in paizi"
                  :label="val.channelName"
                  :value="val.uid"
                  :key="index"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="业务类型" style="float: left">
              <el-select
                class="appointVip"
                v-model="form.busUid"
                placeholder="请选择业务类型"
              >
                <el-option
                  v-for="(val, index) in typesOptions"
                  :label="val.busName"
                  :value="val.uid"
                  :key="index"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="计算方式" style="float: left">
              <el-select
                v-model="form.rgtCalcType"
                placeholder="请选择计算方式"
              >
                <el-option
                  v-for="items in vipType"
                  :key="items.value"
                  :label="items.label"
                  :value="items.value"
                ></el-option
              ></el-select>
            </el-form-item>
            <el-form-item label="手机号" style="float: left">
              <el-input
                v-model="form.officePhone"
                placeholder="请输入手机号"
              ></el-input>
            </el-form-item>
            <el-form-item label="变更类型" style="float: left">
              <el-select
                v-model="form.changeType"
                clearable
                placeholder="请选择类型"
              >
                <el-option label="全部" value=""></el-option>
                <el-option label="购买" value="0"></el-option>
                <el-option label="规则升级" value="1"></el-option>
                <el-option label="规则降级" value="2"></el-option>
                <el-option label="OEM调整升级" value="3"></el-option>
                <el-option label="OEM调整降级" value="4"></el-option>
                <el-option label="购机赠送" value="5"></el-option>
                <el-option label="系统变更降级" value="6"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="支付方式" style="float: left">
              <el-select
                v-model="form.payType"
                clearable
                placeholder="请选择类型"
              >
                <el-option label="全部" value=""></el-option>
                <el-option label="账户支付" value="2"></el-option>
                <el-option label="支付宝" value="1"></el-option>
                <el-option label="线下转账" value="4"></el-option>
                <!-- <el-option label="小程序支付" value="3"></el-option> -->
              </el-select>
            </el-form-item>
            <el-form-item label="变更时间" style="float: left">
              <el-date-picker
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="开始日期"
                v-model="form.payTimeStart"
              ></el-date-picker>
              <div class="times">-</div>
              <el-date-picker
                v-model="form.payTimeEnd"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="结束日期"
              >
              </el-date-picker>
            </el-form-item>
          </el-form>
        </div>
        <div class="buttons">
          <el-button
            v-if="isAuth('buyreSearch')"
            type="primary"
            @click="onSubmit"
            >搜索</el-button
          >
          <el-button v-if="isAuth('buyreReset')" @click="reset">重置</el-button>
          <el-button
            class="butt"
            v-if="totalNum > 0"
            type="primary"
            style="margin-left: 40px"
            @click="exportes()"
          >
            批量导出
          </el-button>
        </div>
        <el-table
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="dark"
          :header-cell-style="{ background: '#F9FAFC', color: '#222' }"
          stripe
          border
          :row-style="{ height: '0px' }"
          :cell-style="{ padding: '0px' }"
          @selection-change="handleSelectionChange"
        >
          <el-table-column
            prop="oemName"
            show-overflow-tooltip
            label="归属OEM"
            min-width="120"
          >
          </el-table-column>
          <el-table-column
            prop="parentOfficeName"
            show-overflow-tooltip
            label="归属机构"
            min-width="120"
          >
          </el-table-column>
          <el-table-column
            show-overflow-tooltip
            prop="officeName"
            label="机构名称"
            min-width="120"
          >
          </el-table-column>
          <el-table-column
            prop="officePhone"
            show-overflow-tooltip
            label="手机号"
            min-width="100"
          >
          </el-table-column>
          <el-table-column
            prop="channelName"
            show-overflow-tooltip
            label="业务品牌"
            min-width="120"
          >
          </el-table-column>
          <el-table-column
            prop="busName"
            label="业务类型"
            show-overflow-tooltip
            min-width="120"
          ></el-table-column>
          
          <el-table-column
            label="计算方式"
            min-width="100"
            prop="rgtCalcTypeName"
          >
            <!-- <template slot-scope="scope">
              <span>
                {{ scope.row.rgtCalcType == "1" ? "刷脸快捷" : "交易推送" }}
              </span>
            </template> -->
          </el-table-column>
          <el-table-column
            show-overflow-tooltip
            prop="oldRgtName"
            label="变更前"
            min-width="110"
          >
          </el-table-column>
          <el-table-column
            show-overflow-tooltip
            prop="rgtName"
            label="变更后"
            min-width="110"
          >
          </el-table-column>
          <el-table-column
            show-overflow-tooltip
            prop="payTypeName"
            label="支付方式"
            width="100"
          >
          </el-table-column>
          <el-table-column
            show-overflow-tooltip
            prop="changeTypeName"
            label="变更类型"
            min-width="100"
          >
          </el-table-column>
          <el-table-column
            show-overflow-tooltip
            prop="amount"
            label="付款金额"
            width="120"
          >
          </el-table-column>
          <el-table-column
            show-overflow-tooltip
            prop="createDate"
            label="变更时间"
            min-width="155"
          >
          </el-table-column>
        </el-table>
        <el-pagination
          style="text-align: right"
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="form.page"
          :page-sizes="[20, 50, 100]"
          :page-size="form.number"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalNum"
        >
        </el-pagination>
      </div>

      <Tree :showType="showType" @func="transmit" />
    </div>
  </div>
</template>

<script>
import Tree from "../tree/index";
import https from "../../plugins/https.js";
// 批量导出
import { exportFile } from "../../plugins/expord";
import { CompareDate } from "../../assets/js/commion";
import axios from "axios";
export default {
  name: "route",
  data() {
    return {
      mechanism: "",
      typebox: 0,
      type: 1,
      showType: false,
      officeName: "",
      currentPage: 1, //默认显示第一页
      pageSize: 10, //默认每页显示10条
      totalNum: 0, //总页数
      msg: [],
      newType: "",
      typesOptions:"",
      form: {
        busUid:"",
        rgtCalcType: "",
        payType: "",
        officePhone: "",
        oemUid:
          localStorage.getItem("jurisdiction") != 2
            ? localStorage.getItem("uid")
            : "", //OEMid
        oemName: "",
        parentOfficeUid: "",
        ChannelName: "",
        officeName: "",
        orderCode: "",
        changeType: "",
        payTimeStart: "",
        payTimeEnd: "",
        officeCode: "",
        channelUid: "",
        page: 1,
        number: 20,
      },
      tableData: [],
      paizi: [],
      multipleSelection: [],
      vipType: [],
    };
  },
  created() {
    var _this = this;
    https
      .vipBrandList({ oemUid: localStorage.getItem("uid") })
      .then(function (d) {
        if (d.data.code == "0000") {
          _this.paizi = d.data.data;
        } else {
          layer.open({
            content: d.data.msg,
            skin: "msg",
            time: 2, //2秒后自动关闭
          });
        }
      })
      .catch(function (error) {});
  },
  mounted: function () {
    window.scrollTo(0, 0);
    var _this = this;
    _this.typebox = localStorage.getItem("jurisdiction");
    sessionStorage.setItem("huixianid", "");
    // 初始化列表
    _this.list();
    _this.vipTypes();
    _this.types()
  },
  watch: {
    // 监听type的变化情况
    type: function (newVal, oldVal) {
      //type是data的return返回对象中的数组变量，newVal是属性变化后的值，oldVal是属性变化前的值
      if (newVal == 1) {
        this.list();
      }
    },
  },
  methods: {
    // 业务类型
    types(){
      https.getAllBusInfo({ status: "0" }).then(res => {
        console.log(res);
        this.typesOptions = res.data.data;
      })
      .catch(err => {});
    },
    // 权益类型
    vipTypes() {
      https
        .queryDictList({ type: "calc_type" })
        .then((res) => {
          console.log(res.data.data);
          this.vipType = res.data.data;
        })
        .catch((err) => {});
    },
    // 重置
    reset() {
      this.form.busUid = ""
      this.form.orderCode = "";
      this.form.channelUid = "";
      this.form.officeName = "";
      this.form.oemName = "";
      this.form.changeType = "";
      this.form.payTimeStart = "";
      this.form.payTimeEnd = "";
      this.form.parentOfficeUid = "";
      this.mechanism = "";
      this.form.payTimeStart = "";
      this.form.officePhone = "";
      this.officeName = "";
      this.form.payType = "";
      this.form.page = 1;
      this.form.rgtCalcType = "";
      this.list();
    },
    //这里开始
    transmit(data) {
      console.log(data.uid);
      //归属机构的uid
      this.form.parentOfficeUid = data.uid;
      this.officeName = data.name;
    },
    //设置取消的
    determine() {
      // alert("执行")
      this.showType = false;
    },

    selectInstitution() {
      this.showType = true;
    },
    // 点击搜索
    onSubmit() {
      if (this.form.payTimeStart != "" && this.form.payTimeEnd != "") {
        if (CompareDate(this.form.payTimeStart, this.form.payTimeEnd)) {
          this.form.page = 1;
          this.list();
        }else{
          layer.open({
              content: "开始时间不能小于结束时间",
              skin: "msg",
              time: 1 //1秒后自动关闭
            });
        }
      }else{
        this.form.page = 1;
          this.list();
      }
    },
    // 批量导出
    exportes() {
      var _this = this;
      exportFile("/api/member/mer/excel/export", _this.form, "权益变更记录");
    },
    // 初始化列表
    list() {
      axios
        .post("/api/rgt/order/query", {
          query: this.form,
          pageIndex: this.form.page,
          pageSize: this.form.number,
        })
        .then((res) => {
          console.log("列表数据");
          console.log(res);
          this.tableData = res.data.data.list;
          this.totalNum = Number(res.data.data.totalSize);
        })
        .catch((err) => {
          console.log(err);
        });

      return;
      var _this = this;
      https
        .vipOrderList(_this.form)
        .then(function (d) {
          if (d.data.code == "0000") {
            _this.tableData = d.data.data;
            for (var s = 0; s < _this.tableData.length; s++) {
              _this.tableData[s].payStatus =
                _this.tableData[s].payStatus == 1 ? "已支付" : "";
              _this.tableData[s].status =
                _this.tableData[s].status == 0 ? "启用" : "停用";
              if (_this.tableData[s].payType == "1") {
                _this.tableData[s].payType = "支付宝";
              } else if (_this.tableData[s].payType == "2") {
                _this.tableData[s].payType = "账户支付";
              } else if (_this.tableData[s].payType == "4") {
                _this.tableData[s].payType = "线下转账";
              }
              if (_this.tableData[s].changeType == 0) {
                _this.tableData[s].changeType = "购买";
              } else if (_this.tableData[s].changeType == 1) {
                _this.tableData[s].changeType = "规则升级";
              } else if (_this.tableData[s].changeType == 2) {
                _this.tableData[s].changeType = "规则降级";
              } else if (_this.tableData[s].changeType == 3) {
                _this.tableData[s].changeType = "oem调整升级";
              } else if (_this.tableData[s].changeType == 4) {
                _this.tableData[s].changeType = "oem调整降级";
              } else if (_this.tableData[s].changeType == 5) {
                _this.tableData[s].changeType = "购机赠送";
              } else if (_this.tableData[s].changeType == 6) {
                _this.tableData[s].changeType = "系统变更降级";
              }
            }
            _this.totalNum = d.data.total;
          } else {
            layer.open({
              content: d.data.msg,
              skin: "msg",
              time: 2, //1秒后自动关闭
            });
          }
        })
        .catch(function (error) {});
    },
    // 分页
    handleSizeChange(val) {
      this.form.number = val; //动态改变
      this.form.page = 1;

      this.list();
    },
    // 分页改变
    handleCurrentChange(val) {
      this.form.page = val; //动态改变
      this.list();
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    showdou() {
      this.$refs.mychild.parentHandleclick();
    },
  },
  components: {
    Tree,
  },
};
</script>

<style scoped>
.con {
  position: relative;
}
/* 单独样式 */
.contbox6_10 {
  width: 100%;
  overflow-x: auto;
  box-sizing: border-box;
  float: left;
}
.times {
  width: 20px;
  display: inline-block;
  text-align: center;
}
.buttons > .el-button {
  width: 100px;
  padding: 7px;
  height: 32px;
}
</style>
